<template>
  <div id="layout-wrapper">
    <div class="left">
      <SideBar></SideBar>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import SideBar from './SideBar.vue'
</script>

<style lang="scss">
#layout-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: lightgreen;

  .left {
    width: 200px;
    background-color: lightblue;
    height: 100%;
    /* 关键1：禁止收缩（避免被右侧挤压变窄） */
    flex-shrink: 0; 
    /* 关键2：限制最大宽度（根据需求设置，避免展开后过宽） */
    max-width: 100%;
    /* 可选：内容过多时内部滚动，不挤压容器 */
    overflow-x: hidden; 
    overflow-y: auto;
  }
  .right {
    flex: 1;
    min-height: 100%;
    overflow: hidden;
  }
}
</style>